<template>
	<div class="operationBox heightMax flexContent" v-loading='tableLoading'>
		<div class="header">
			<div class="header-item">
				<div class="headerBox">
					<div class="header-item-header">
						<div class="font14 location locationBefore">我的关注</div>
					</div>
					<div class="header-content" style="padding: 0;">
						<div class="echartPie1" ref='echartPie1'>
						</div>
						<div class="echartPie1" ref='echartPie2'>
						</div>
						<div @click="goJiank" style="margin-top: 5px;">
							<el-button>我的监控：<span class=" cursor eleBlueColor">{{jiank}}</span>台</el-button>
						</div>
					</div>
				</div>
			</div>
			<div class="header-item">
				<div class="headerBox">
					<div class="header-item-header">
						<div class="font14 location " @click="changeClass(index)" :class="{locationBefore:cur==index}" v-for="(item,index) in tabTwo"
						 :key='index'>{{item}}</div>
					</div>
					<div class="headerCon" v-if="cur == 0">
						<div class="headerConItem" v-for="(item,index) in headerConItem1Arr" :key='index' @click="goNext(item.name)">
							<p class="eleBlueColor font16">{{item.number}}</p>
							<p class="font12 elInfoColor">{{item.name}}</p>
							<img src="../../assets/liftImg/jiao.png" alt="">
						</div>
					</div>
					<div class="headerCon" v-if="cur == 1">
						<div class="headerConItem" v-for="(item,index) in headerConItem2Arr" :key='index' @click="goNext(item.name)">
							<p class="eleBlueColor font16">{{item.number}}</p>
							<p class="font12 elInfoColor">{{item.name}}</p>
							<img src="../../assets/liftImg/jiao.png" alt="">
						</div>
					</div>
					<div class="headerCon" v-if="cur == 2">
						<div class="headerConItem" v-for="(item,index) in headerConItem3Arr" :key='index' @click="goNext(item.name)">
							<p class="eleBlueColor font16">{{item.number}}</p>
							<p class="font12 elInfoColor">{{item.name}}</p>
							<img src="../../assets/liftImg/jiao.png" alt="">
						</div>
					</div>
					<div class="headerCon" v-if="cur == 3">
						<div class="headerConItem" v-for="(item,index) in headerConItem4Arr" :key='index' @click="goNext(item.name)">
							<p class="eleBlueColor font16">{{item.number}}</p>
							<p class="font12 elInfoColor">{{item.name}}</p>
							<img src="../../assets/liftImg/jiao.png" alt="">
						</div>
					</div>
				</div>
			</div>
			<div class="header-item">
				<div class="headerBox">
					<div class="header-item-header">
						<div class="font14 location " @click="changeClass1(index)" :class="{locationBefore:cur1==index}" v-for="(item,index) in tabThree"
						 :key='index'>{{item}}</div>
					</div>
					<div class="headerCon" v-if="cur1 == 0">
						<div class="headerConItem" v-for="(item,index) in headerConItem11Arr" :key='index' @click="goNext(item.name)">
							<p class="eleBlueColor font16">{{item.number}}</p>
							<p class="font12 elInfoColor">{{item.name}}</p>
							<img src="../../assets/liftImg/jiao.png" alt="">
						</div>
					</div>
					<div class="headerCon" v-if="cur1 == 1">
						<div class="headerConItem" v-for="(item,index) in headerConItem22Arr" :key='index' @click="goNext(item.name)">
							<p class="eleBlueColor font16">{{item.number}}</p>
							<p class="font12 elInfoColor">{{item.name}}</p>
							<img src="../../assets/liftImg/jiao.png" alt="">
						</div>
					</div>
					<div class="headerCon" v-if="cur1 == 2">
						<div class="headerConItem" v-for="(item,index) in headerConItem33Arr" :key='index' @click="goNext(item.name)">
							<p class="eleBlueColor font16">{{item.number}}</p>
							<p class="font12 elInfoColor">{{item.name}}</p>
							<img src="../../assets/liftImg/jiao.png" alt="">
						</div>
					</div>
					<div class="headerCon" v-if="cur1 == 3">
						<div class="headerConItem" v-for="(item,index) in headerConItem44Arr" :key='index' @click="goNext(item.name)">
							<p class="eleBlueColor font16">{{item.number}}</p>
							<p class="font12 elInfoColor">{{item.name}}</p>
							<img src="../../assets/liftImg/jiao.png" alt="">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="bottom-item">
				<div class="listName">
					<i></i><span class="font14">在用电梯</span>
				</div>
				<div class="tuBiaoContent" ref='echartsCol1'>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
	} from "@/common.js";
	import $ from 'jquery'
	export default {
		mounted() {
			this.getList()
		},
		data() {
			return {
				tableLoading: true,
				elevator: '',
				maintain_company: '',
				property_company: '',
				company_person: '',
				contract: '',
				contract_expire: '',
				task: '',
				task_expire: '',
				platform: '',
				device: '',
				all_device: '',
				ef: '',
				users: '',
				repair: '',
				repair_expire: '',
				keys: [],
				values: [],
				tabTwo: ['运行监控', '保养', '故障', '检验'],
				tabThree: ['维保单位', '使用单位', '监管单位', '物联网平台'],
				cur: 0,
				cur1: 0,
				headerConItem1Arr: [],
				headerConItem2Arr: [],
				headerConItem3Arr: [],
				headerConItem4Arr: [],
				headerConItem11Arr: [],
				headerConItem22Arr: [],
				headerConItem33Arr: [],
				headerConItem44Arr: [],
				pieArr: [],
				jiank: ''
			}
		},
		methods: {
			goNext(name) {
				if (name == '故障报警') {
					localStorage.searchElevatorFaultRecord = JSON.stringify({id:10})
					this.goLink11()
				} else if (name == '在线') {
					localStorage.searchOperationMonitoring = JSON.stringify({
						id: 2
					})
					this.publickLink('运行实时监控', '/MainView/RealTimeElevatorMonitoring/OperationMonitoring', 'OperationMonitoring')
				} else if (name == '离线') {
					localStorage.searchOperationMonitoring = JSON.stringify({
						id: 3
					})
					this.publickLink('运行实时监控', '/MainView/RealTimeElevatorMonitoring/OperationMonitoring', 'OperationMonitoring')
				}
				if (this.cur == 1) {
					if (name == '待保养') {
						this.goLink7(4)
					} else if (name == '即将过期') {
						this.goLink7(5)
					} else if (name == '已过期') {
						this.goLink7(6)
					} else if (name == '保养异常') {
						this.goLink7(7)
					}
				} else if (this.cur == 2) {
					if (name == '待维修') {
						this.goLink8(4)
					} else if (name == '即将过期') {
						this.goLink8(5)
					} else if (name == '已过期') {
						this.goLink8(6)
					}
				}
				if (name == '维保单位') {
					this.goLink2()
				} else if (name == '维保人员') {
					this.goLink5()
				}
				if (name == '使用单位') {
					this.goLink3()
				} else if (name == '使用单位人员') {
					this.goLink4()
				}
				if (name == '监管单位') {
					localStorage.searchInstitutionalFramework = JSON.stringify({
						id: 3
					})
					this.publickLink('单位管理', '/MainView/SystemManagement/InstitutionalFramework', 'InstitutionalFramework')
				} else if (name == '监管单位人员') {
					localStorage.searchUserCountManage = JSON.stringify({
						id: 4
					})
					this.publickLink('用户管理', '/MainView/SystemManagement/UserCountManage', 'UserCountManage')
				} else if (name == '平台') {
					this.publickLink('平台接入控制', '/MainView/BusinessConfiguration/AccessManufacturer', 'AccessManufacturer')
				} else if (name == '制造单位') {
					this.publickLink('制造单位', '/MainView/BusinessConfiguration/ManufactureCompany', 'ManufactureCompany')
				} else if (name == '超期合同') {
					this.goLink6(2)
				}
				if (this.cur == 3) {
					if (name == '检验不合格') {
						localStorage.liftMessName = JSON.stringify({
							name: 1
						})
					} else if (name == '即将检验') {
						localStorage.liftMessName = JSON.stringify({
							name: 2
						})
					} else if (name == '检验超期') {
						localStorage.liftMessName = JSON.stringify({
							name: 3
						})
					}
					this.publickLink('电梯管理', '/MainView/ElevatorMaintenance/LiftManage', 'LiftManage')
				}
				if(name == '频繁报警'){
					localStorage.searchElevatorFaultRecord = JSON.stringify({id:11})
					this.goLink11()
				}
			},
			objMethods(name, value) {
				return {
					name: name,
					number: value
				}
			},
			changeClass(index) {
				this.cur = index
			},
			changeClass1(index) {
				this.cur1 = index
			},
			publickLink(title, index, name) {
				let obj = {
					newLabel: title,
					index: index,
				}
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: name
				})
			},
			goJiank() {
				localStorage.searchOperationMonitoring = JSON.stringify({
					id: 1
				})
				this.publickLink('运行实时监控', '/MainView/RealTimeElevatorMonitoring/OperationMonitoring', 'OperationMonitoring')
			},
			goLink1() {
				this.publickLink('电梯管理', '/MainView/ElevatorMaintenance/LiftManage', 'LiftManage')
			},
			goLink2() {
				localStorage.searchInstitutionalFramework = JSON.stringify({
					id: 1
				})
				this.publickLink('单位管理', '/MainView/SystemManagement/InstitutionalFramework', 'InstitutionalFramework')
			},
			goLink3() {
				localStorage.searchInstitutionalFramework = JSON.stringify({
					id: 2
				})
				this.publickLink('单位管理', '/MainView/SystemManagement/InstitutionalFramework', 'InstitutionalFramework')
			},
			goLink4() {
				localStorage.searchUserCountManage = JSON.stringify({
					id: 3
				})
				this.publickLink('用户管理', '/MainView/SystemManagement/UserCountManage', 'UserCountManage')
			},
			goLink5() {
				localStorage.searchUserCountManage = JSON.stringify({
					id: 2
				})
				this.publickLink('用户管理', '/MainView/SystemManagement/UserCountManage', 'UserCountManage')
			},
			goLink6(val) {
				localStorage.searchMainPact = JSON.stringify({
					id: val
				})
				this.publickLink('维保合同', '/MainView/ElevatorMaintenance/MainPact', 'MainPact')
			},
			goLink7(val) {
				localStorage.searchMainPlan = JSON.stringify({
					id: val
				})
				this.publickLink('保养计划', '/MainView/ElevatorMaintenance/MainPlan', 'MainPlan')
			},
			goLink8(val) {
				localStorage.searchLiftService = JSON.stringify({
					id: val
				})
				this.publickLink('普通维修', '/MainView/MaintenanceAndRepair/LiftService', 'LiftService')
			},
			goLink9() {
				this.publickLink('平台接入控制', '/MainView/BusinessConfiguration/AccessManufacturer', 'AccessManufacturer')
			},
			goLink10() {
				this.publickLink('外设管理', '/MainView/BusinessConfiguration/PeripheralsMan', 'PeripheralsMan')
			},
			goLink11() {
				this.publickLink('电梯故障记录', '/MainView/ElevatorFaultManagement/ElevatorFaultRecord', 'ElevatorFaultRecord')
			},
			getList() {
				axiosGet('/sta/statistics/summary/', {}, (res) => {
					this.tableLoading = false
					if (res.code == 0) {
						this.keys = Object.keys(res.detail.year_numbers)
						this.values = Object.values(res.detail.year_numbers)
						this.getColumnar1()
						let a1 = this.objMethods('故障报警', res.detail.fault)
						let a2 = this.objMethods('在线', res.detail.online_count)
						let a3 = this.objMethods('离线', res.detail.offline_ids)
						let a4 = this.objMethods('频繁报警', res.detail.frequently_alarm_count)
						this.headerConItem1Arr.push(a1, a2, a3, a4)
						let b1 = this.objMethods('待保养', res.detail.task_will_do)
						let b2 = this.objMethods('即将过期', res.detail.task_will_expire)
						let b3 = this.objMethods('已过期', res.detail.task_expire)
						let b4 = this.objMethods('保养异常', res.detail.task_has_trouble)
						let b5 = this.objMethods('超期合同', res.detail.contract_expire)
						this.headerConItem2Arr.push(b1, b2, b3, b4, b5)
						let c1 = this.objMethods('待维修', res.detail.repair_will_do)
						let c2 = this.objMethods('即将过期', res.detail.repair_will_expire)
						let c3 = this.objMethods('已过期', res.detail.repair_expire)
						let c4 = this.objMethods('频繁维修', 0)
						this.headerConItem3Arr.push(c1, c2, c3, c4)
						let d1 = this.objMethods('维保单位', res.detail.maintain_company)
						let d2 = this.objMethods('维保人员', res.detail.company_person)
						let d3 = this.objMethods('服务合同', res.detail.service_contract)
						this.headerConItem11Arr.push(d1, d2, d3)
						let e1 = this.objMethods('使用单位', res.detail.property_company)
						let e2 = this.objMethods('使用单位人员', res.detail.property_person)
						this.headerConItem22Arr.push(e1, e2)
						let f1 = this.objMethods('监管单位', res.detail.supervisor_company)
						let f2 = this.objMethods('监管单位人员', res.detail.supervisor_person)
						this.headerConItem33Arr.push(f1, f2)
						let g1 = this.objMethods('平台', res.detail.platform)
						let g2 = this.objMethods('制造单位', res.detail.manufacturers)
						this.headerConItem44Arr.push(g1, g2)
						let h1 = this.objMethods('今日故障', res.detail.today_fault)
						let h2 = this.objMethods('今日维保', res.detail.today_tasks)
						let h3 = this.objMethods('今日维修', res.detail.today_repair)
						this.pieArr.push(h1, h2, h3)
						let i1 = this.objMethods('我的故障', res.detail.my_faults)
						let i2 = this.objMethods('我的维保', res.detail.my_tasks)
						let i3 = this.objMethods('我的维修', res.detail.my_repairs)
						let newArr = []
						newArr.push(i1, i2, i3)
						let j1 = this.objMethods('检验不合格', res.detail.elevators_expired)
						let j2 = this.objMethods('即将检验', res.detail.elevators_will_expire)
						let j3 = this.objMethods('检验超期', res.detail.elevators_expired)
						this.headerConItem4Arr.push(j1, j2, j3)
						this.jiank = res.detail.elevator
						this.getPie(this.pieArr, 'echartPie1')
						this.getPie(newArr, 'echartPie2')
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			getPie(arr, domName) {
				let dom = ''
				if (domName == 'echartPie1') {
					dom = this.$refs.echartPie1
				} else if (domName == 'echartPie2') {
					dom = this.$refs.echartPie2
				}
				let myChart = this.echarts.init(dom)
				let series = []
				arr.map((item, index) => {
					let obj = {
						center: [`${26*(index+1)}%`, '53%'],
						type: 'pie',
						radius: [40, 43],
						labelLine: {
							normal: {
								show: false
							}
						},
						itemStyle: {
							normal: {
								label: {
									show: true,
									position: 'center',
									textStyle: {
										fontSize: "15",
										align: 'center'
									},
									formatter: function(val) { //让series 中的文字进行换行
										return `${val.value}\n${val.name}`
									}
								}, //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
								labelLine: {
									show: true,
									lineStyle: {
										color: '#3c4858'
									}
								} //线条颜色
							}, //基本样式
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)', //鼠标放在区域边框颜色
								textColor: '#000'
							} //鼠标放在各个区域的样式
						},
						data: [{
							name: item.name,
							value: item.number
						}]
					}
					series.push(obj)
				})
				myChart.setOption({
					tooltip: {
						show: false
						// trigger: 'item',
						// formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					legend: {
						show: false
					},
					color: ['#51bfff'],
					graphic: {
						type: 'text',
						left: 'center',
						top: 'center',
						style: {
							textAlign: 'center',
							font: 'italic bolder 16px cursive',
							fill: '#000',
							width: 30,
							height: 30
						}
					}, //此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
					series: series
				})
				//增加监听事件
				let that = this
				myChart.on('click', function eConsole(param) {
					console.log(param)
					if (param.name == '今日故障') {
						localStorage.searchElevatorFaultRecord = JSON.stringify({
							id: 1
						})
						that.publickLink('电梯故障记录', '/MainView/ElevatorFaultManagement/ElevatorFaultRecord', 'ElevatorFaultRecord')
					} else if (param.name == '今日维保') {
						localStorage.searchMainPlan = JSON.stringify({
							id: 3
						})
						that.publickLink('保养计划', '/MainView/ElevatorMaintenance/MainPlan', 'MainPlan')
					} else if (param.name == '今日维修') {
						localStorage.searchLiftService = JSON.stringify({
							id: 3
						})
						that.publickLink('普通维修', '/MainView/MaintenanceAndRepair/LiftService', 'LiftService')
					} else if (param.name == '我的维修') {
						localStorage.searchLiftService = JSON.stringify({
							id: 7
						})
						that.publickLink('普通维修', '/MainView/MaintenanceAndRepair/LiftService', 'LiftService')
					} else if (param.name == '我的维保') {
						localStorage.searchMainPlan = JSON.stringify({
							id: 8
						})
						that.publickLink('保养计划', '/MainView/ElevatorMaintenance/MainPlan', 'MainPlan')
					} else if (param.name == '我的故障') {
						localStorage.searchElevatorFaultRecord = JSON.stringify({
							id: 2
						})
						that.publickLink('电梯故障记录', '/MainView/ElevatorFaultManagement/ElevatorFaultRecord', 'ElevatorFaultRecord')
					}
				});
			},
			getColumnar1() {
				let dom = this.$refs.echartsCol1
				let myChart = this.echarts.init(dom)
				myChart.setOption({
					dataZoom: [{
						// start: 0,
						// end: 20,
						type: 'inside'
					}, {
						type: 'slider'
					}],
					color: ['#3398DB'],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: this.keys,
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '数量',
						type: 'bar',
						barWidth: '60%',
						data: this.values,
						itemStyle: { //上方显示数值
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'orange',
										fontSize: 14
									}
								}
							}
						}
					}]
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.flexContent {
		width: 100%;
		display: flex;
		flex-direction: column;

		.header {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 300px;

			.header-item {
				width: 33%;
				height: 100%;
				// background: white;
				background: url(../../assets/liftImg/onePageBg.png) no-repeat 0 0;
				background-size: 100% 100%;
				// border-radius: 5px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// padding: 10px;
				// box-sizing: border-box;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

				p {
					text-align: left;
					line-height: 30px;
					padding: 0 20px;
					box-sizing: border-box;

					span {
						display: inline-block;
						width: 130px;
						text-align: left;
					}
				}

				.header-content {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 15px;
					box-sizing: border-box;
				}
			}

			.header-item:first-child {
				margin-right: 0.5%;
			}

			.header-item:last-child {
				margin-left: 0.5%;
			}
		}

		.bottom {
			width: 100%;
			display: flex;
			flex-direction: row;
			margin-top: 0.5%;
			flex: 1;

			.bottom-item {
				padding: 10px;
				box-sizing: border-box;
				flex: 1;
				height: 100%;
				background: #fff;
				border-radius: 5px;
				box-sizing: border-box;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

				.tuBiaoContent {
					height: 90%;
				}
			}

			// .bottom-item:first-child {
			// 	margin-right: 0.5%;
			// }
		}
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 10%;
		align-items: center;

		span {
			color: #2d8cf0;
		}

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
		}
	}

	.color2 {
		color: #606266;
		font-size: 15px;
	}

	.color1 {
		color: #303133;
		font-size: 14px;
		font-weight: 500;
		margin: 0 5px;
	}

	.echartPie1 {
		width: 100%;
		height: 100px;
	}

	.header-item-header {
		display: flex;
		padding-left: 15px;
		padding-top: 5px;
	}

	.location {
		display: inline-block;
		width: 80;
		text-align: center;
		color: #333;
		position: relative;
		z-index: 11;
		padding: 5px;
		box-sizing: border-box;
		margin-right: 5px;
		cursor: pointer;
	}

	.locationBefore {
		color: #fff;
	}

	.locationBefore:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #51bfff;
		transform: skewX(-45deg);
		z-index: -1;
	}

	.headerBox {
		height: 95%;
		width: 95%;
		background: #fff;

		.headerCon {
			width: 100%;
			padding: 15px;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.headerConItem {
				position: relative;
				width: 32%;
				background: #636d82;
				border-radius: 5px 0 5px 5px;
				margin-right: 3px;
				margin-top: 3px;
				cursor: pointer;

				p {
					text-align: center;
				}

				img {
					position: absolute;
					width: 10px;
					height: 10px;
					right: 0;
					top: 0;
				}
			}
		}
	}
</style>
